<!doctype html>
<html>
<head>
    <title>倔强的土豆</title>

    
        <meta charset="UTF-8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href='/public/css/screen.css'>
<link rel="stylesheet" href='/public/css/syntax.css'>
<link rel="stylesheet" href="/public/styles/default.css">
<script src="/public/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
    
</head>
<body>
    <div class="site">
        
            <div class="header">
            <div class="title">
    <a href="/">倔强的土豆</a>
    <a class="extra" href="/">home</a>
</div>
            </div>
        
        <!--
            <nav class="menu">
    <ul>
        <li>
            <a class="extra" href="/">分类</a></li>
        <li>
            <a class="extra" href="/">归档</a></li>
        <li>
            <a class="extra" href="/">标签</a></li>
    </ul>
</nav>
        -->
        
<div class="main">
    <p>啥是SASS，官方说Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
比较高调，意思是说Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言。
&lt;!-- more --&gt;</p>
<h2 id="-">概述</h2>
<p>学过CSS的人都知道，它不是一种编程语言。在写css的时候，css只能是一行单纯的描述，写起来一板一眼，简单明确(因为css不算计算机语言)，
当项目稍微变大，又或者，这个项目要经常改动的时候，css文件就会变得混乱不堪，这时候牛人为啥叫牛人就被体现出来了，他们把编程语言融入到css中，搞了一个被叫做&quot;CSS预处理器&quot;（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。一开始我觉得这是多此一举，但是为了迎合潮流就学习了，之后才感觉到这是css的进步，犹如jQuery对于JavaScript。（和牛人的差距太大）</p>
<p>Sass 是众多CSS预处理器中的一种</p>
<h2 id="-">安装和使用</h2>
<h3 id="-">安装</h3>
<p>Sass语言使用Ruby写的，但是也有node版本的
首要安装node环境</p>
<pre><code class="lang-bash">    #局部安装
    npm install node-sass --save-dev
</code></pre>
<pre><code class="lang-bash">    #全局安装
    npm install node-sass -g
</code></pre>
<h3 id="-">使用</h3>
<p>node-sass支持Nodejs API的方式编译sass文件，应用在gulp，webpack等等(不做介绍自行查看官方文档)</p>
<p><strong>Command Line Interface(命令行接口)</strong></p>
<pre><code class="lang-bash">    #命令行接口
    node-sass [options] &lt;input&gt; [output]
</code></pre>
<p>Options:</p>
<pre><code class="lang-bash">    -w, --watch                Watch a directory or file
    -r, --recursive            Recursively watch directories or files
    -o, --output               Output directory
    -x, --omit-source-map-url  Omit source map URL comment from output
    -i, --indented-syntax      Treat data from stdin as sass code (versus scss)
    -q, --quiet                Suppress log output except on error
    -v, --version              Prints version info
    --output-style             CSS output style (nested | expanded | compact | compressed)
    --indent-type              Indent type for output CSS (space | tab)
    --indent-width             Indent width; number of spaces or tabs (maximum value: 10)
    --linefeed                 Linefeed style (cr | crlf | lf | lfcr)
    --source-comments          Include debug info in output
    --source-map               Emit source map
    --source-map-contents      Embed include contents in map
    --source-map-embed         Embed sourceMappingUrl as data URI
    --source-map-root          Base path, will be emitted in source-map as is
    --include-path             Path to look for imported files
    --follow                   Follow symlinked directories
    --precision                The amount of precision allowed in decimal numbers
    --error-bell               Output a bell character on errors
    --importer                 Path to .js file containing custom importer
    --functions                Path to .js file containing custom functions
    --help                     Print usage info
</code></pre>
<p>Example:</p>
<pre><code class="lang-bash">    node-sass src/style.scss dest/style.css
    #监听文件变动
    node-sass --watch src/style.scss dest/style.css
</code></pre>
<h2 id="-">基本用法</h2>
<p>Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，下面都使用此语法。 也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。</p>
<p>第二种是缩排语法（或者就称为 &quot;Sass&quot;）， 提供了一种更简洁的 CSS 书写方式。 它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，而且也不使用分号，而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。 缩排语法具有 Sass 的所有特色功能， 虽然有些语法上稍有差异； 这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。 使用此种语法的样式表文件需要以 .sass 作为扩展名。</p>
<h3 id="-">注释</h3>
<p>SASS共有两种注释风格。</p>
<ol>
<li>标准的CSS注释 /* code */ ，会保留到编译后的文件。
在/<em>! code </em>/，表示这是&quot;重要注释&quot;。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。</li>
<li>单行注释 // code，只保留在SASS源文件中，编译后被省略。</li>
</ol>
<h3 id="-">变量</h3>
<p>SASS所有变量以$开头。</p>
<pre><code class="lang-scss">$blue : #1875e7;　
div {
　　color : $blue;
}
</code></pre>
<p>变量拼接必须写在#{}之中。</p>
<pre><code class="lang-scss">$side : left;
.rounded {
　　border-#{$side}-radius: 5px;
}
</code></pre>
<h3 id="-">计算</h3>
<pre><code class="lang-scss">body {
　　margin: (14px/2);
　　top: 50px + 100px;
}
</code></pre>
<h3 id="-">嵌套</h3>
<pre><code class="lang-scss">// 选择器嵌套
// css code
div h1 {
　　color: red;
}
// 可以写成
div {
    h1 {
        color: red;
    }
}

// 属性也可以嵌套
// css code
div {
    border-color: red;
}
// 可以写成（注意border后面必须加&quot;:&quot;）
div {
    border: {
        color: red;
    }
}

//在嵌套的代码块内，可以使用&amp;引用父元素
//css code
a:hover {
    color: #ffb3ff;
}
// 可以写成
a {
　　&amp;:hover { color: #ffb3ff; }
}
</code></pre>
<h3 id="-">自定义函数</h3>
<p>SASS允许用户编写自己的函数。</p>
<pre><code class="lang-scss">@function double($n) {
　　@return $n * 2;
}
#sidebar {
　　width: double(5px);
}
</code></pre>
<h2 id="-">@规则指令(方便代码重用)</h2>
<h3 id="-extend-">@extend 继承</h3>
<p>SASS允许一个选择器，继承另一个选择器</p>
<pre><code class="lang-scss">.one {
　　border: 1px solid #ddd;
}
// two选择器继承one

.two {
    @extend .one;
    color: red;
}
</code></pre>
<h3 id="-mixin-">@mixin 重用代码块</h3>
<h3 id="-include-">@include调用代码块</h3>
<p>Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。</p>
<pre><code class="lang-scss">@mixin left() {
    float: left;
    margin-left: 10px;
}
// 使用@include命令，调用这个mixin
div {
    @include left;
}

//mixin的强大之处，在于可以指定参数和缺省值
@mixin right($value: 10px) {
　　float: right;
　　margin-right: $value;
}

div {
　　@include left(20px);
}
</code></pre>
<h3 id="-import-">@import 插入文件</h3>
<pre><code class="lang-scss">// 用来插入外部文件
@import &quot;src/test.scss&quot;

// 如果插入的是.css文件，则等同于css import
@import &quot;src/test.css&quot;
</code></pre>
<h2 id="-">@控制指令</h2>
<h3 id="-">条件语句</h3>
<p>@if可以用来判断</p>
<pre><code class="lang-scss">p {
　　@if 1 + 1 == 2 { border: 1px solid; }
　　@if 5 &lt; 3 { border: 2px dotted; }
}

// 还有@else指令
p {
    @if lightness($color) &gt; 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}
}
</code></pre>
<h3 id="-">循环语句</h3>
<p>SASS支持for循环：</p>
<pre><code class="lang-scss">@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

// 也支持while循环
$i: 6;
@while $i &gt; 0 {
　　.item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}

// each命令，作用与for类似：
@each $member in a, b, c, d {
　　.#{$member} {
　　　　background-image: url(&quot;/image/#{$member}.jpg&quot;);
　　}
}
</code></pre>
<h2 id="-">参考链接</h2>
<p><a href="http://www.ruanyifeng.com/blog/2012/06/sass.html">SASS用法指南</a>。</p>

</div>

        
            <div class="footer">
    <div class="contact">
        <p>
            <!--jjtudou-->
            <!--<br /> -->
            <!--<a href="https://codestarter.org/">Codestarter</a>,
            <a href="https://github.com/">GitHub</a>-->
            QQ:438678287 [SHINE TU] 
        </p>
    </div>
    <!--
    <div class="contact">
        <p>
            <a href="http://github.com/mojombo/">github.com/mojombo</a><br />
            <a href="http://twitter.com/mojombo/">twitter.com/mojombo</a><br />
        </p>
    </div>-->
    <!--<div class="rss">
        <a href="http://feeds.feedburner.com/tom-preston-werner">
            <img src="/images/rss.png" alt="Subscribe to RSS Feed" />
        </a>
    </div>-->
</div>
        
    </div>
</body>
</html>